<style lang="less">
    @import 'setting_user.less';
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="md-person"></Icon>
                个人信息
            </p>
            <div>
                <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="90">
                    <FormItem label="用户账号" prop="username">
                        <div style="display:inline-block;width:300px">
                            <Input v-model="username" disabled></Input>
                        </div>
                    </FormItem>
                    <FormItem label="用户昵称" prop="nickname">
                        <div style="display:inline-block;width:300px">
                            <Input v-model="formItem.nickname" placeholder="请输入昵称"></Input>
                        </div>
                    </FormItem>
                    <FormItem label="用户头像" prop="headImg">
                        <div class="demo-upload-list" v-if="formItem.head_img">
                            <img :src="formItem.head_img">
                            <div class="demo-upload-list-cover">
                                <Icon type="ios-trash-outline" @click.native="handleImgRemove()"></Icon>
                            </div>
                        </div>
                        <input v-if="formItem.head_img" v-model="formItem.head_img" type="hidden" name="image">
                        <Upload type="drag"
                                :action="uploadUrl"
                                :headers="uploadHeader"
                                v-if="!formItem.head_img"
                                :format="['jpg','jpeg','png']"
                                :max-size="5120"
                                :on-success="handleImgSuccess"
                                :on-format-error="handleImgFormatError"
                                :on-exceeded-size="handleImgMaxSize"
                                style="display: inline-block;width:58px">
                            <div style="width: 58px;height:58px;line-height: 58px">
                                <Icon type="md-camera" size="20"></Icon>
                            </div>
                        </Upload>
                    </FormItem>
                    <FormItem label="原密码" prop="oldPassword">
                        <div style="display:inline-block;width:300px">
                            <Input type="password" v-model="formItem.oldPassword"
                                   placeholder="请输入现在使用的密码，如需修改密码则必填"></Input>
                        </div>
                    </FormItem>
                    <FormItem label="新密码" prop="password">
                        <div style="display:inline-block;width:300px">
                            <Input type="password" v-model="formItem.password" placeholder="请输入新密码，至少6位字符"></Input>
                        </div>
                    </FormItem>
                    <FormItem label="确认新密码" prop="rePassword">
                        <div style="display:inline-block;width:300px">
                            <Input type="password" v-model="rePassword" placeholder="请再次输入新密码"></Input>
                        </div>
                    </FormItem>
                    <div>
<!--                        <Button type="text" style="width: 100px" @click="cancel">取消</Button>-->
                        <Button type="primary" style="width: 100px;display: block;margin-left: 50px" :loading="saveLoading" @click="confirmSubmit">保存
                        </Button>
                    </div>
                </Form>
            </div>
        </Card>
        <Modal v-model="confirmSub" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>确定要提交么</span>
            </p>
            <div style="text-align:center">
                <p>个人信息修改后，将会退出系统重新登录，请明确后修改！</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="saveLoading" @click="submit">确定修改</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {own} from '@/api/user'
    import {getToken} from '@/api/api.request'

    export default {
        name: 'setting_user',
        data() {
            const checkPassword = (rule, value, callback) => {
                let password = this.formItem.password
                if (password !== this.rePassword) {
                    callback(new Error('两次输入密码不一致'))
                } else {
                    callback()
                }
            }
            const checkOldPassword = (rule, value, callback) => {
                let password = this.formItem.password
                if (password) {
                    if (!this.formItem.oldPassword) {
                        callback(new Error('初始密码不得为空'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            }
            return {
                confirmSub: false,
                uploadUrl: this.$baseUrl + 'Index/upload',
                uploadHeader: {'apiAuth': getToken()},
                saveLoading: false,
                rePassword: '',
                username: '',
                formItem: {
                    id: '',
                    nickname: '',
                    head_img: '',
                    oldPassword: '',
                    password: ''
                },
                ruleValidate: {
                    nickname: [
                        {required: true, message: '请输入用户昵称', trigger: 'blur'}
                    ],
                    password: [
                        {min: 6, message: '请至少输入6个字符', trigger: 'blur'},
                        {max: 32, message: '最多输入32个字符', trigger: 'blur'}
                    ],
                    rePassword: [
                        {validator: checkPassword, trigger: 'blur'}
                    ],
                    oldPassword: [
                        {validator: checkOldPassword, trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            confirmSubmit() {
                this.confirmSub = true
            },
            submit() {
                let vm = this
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {
                        vm.saveLoading = true
                        own(vm.formItem).then(response => {
                            vm.$Message.success(response.data.msg)

                            vm.saveLoading = false
                            vm.confirmSub = false
                            sessionStorage.removeItem('userData') // 清除缓存的用户数据
                            this.$store.dispatch('setIsLogin',false) // 设置登录状态为false
                            this.$store.dispatch('setUserData',{}) // 清除用户数据
                            this.$router.push({
                                name: this.$loginPage
                            })
                        })
                    }
                })
            },
            init() {
                let userInfo = JSON.parse(sessionStorage.getItem('userData'))
                this.username = userInfo.username
                this.formItem.nickname = userInfo.nickname
                this.formItem.head_img = userInfo.userData.head_img
                this.formItem.id = userInfo.id
            },
            handleImgFormatError(file) {
                this.$Notice.warning({
                    title: '文件类型不合法',
                    desc: file.name + '的文件类型不正确，请上传jpg或者png图片。'
                })
            },
            handleImgRemove() {
                this.formItem.head_img = ''
            },
            handleImgSuccess(response) {
                if (response.code === 1) {
                    this.$Message.success(response.msg)
                    this.formItem.head_img = response.data.fileUrl
                } else {
                    this.$Message.error(response.msg)
                }
            },
            handleImgMaxSize(file) {
                this.$Notice.warning({
                    title: '文件大小不合法',
                    desc: file.name + '太大啦请上传小于5M的文件。'
                })
            }
        },
    }
</script>
